<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 回调函数嵌套，会形成回调地狱
      // promise

      // promise的理解
      // 1. promise的三个状态
      // pending   : 等待
      // fulfilled : 成功
      // rejected:   失败
      // 2. promise的状态只能  pending-->fulfilled   pending---->rejected
      // 3. promise状态会凝固

      // promise是一个构造函数
      // const p = new Promise((resolve, reject) => {
      //   // resolve: 解决了   pending ---> fulfilled
      //   // reject: 拒绝      pending---->rejected
      //   console.log(1)
      //   resolve()
      //   reject()
      // })
      // console.log(2)
      // console.log(p)
      // function ajax(url) {
      //   return new Promise((resolve, reject) => {
      //     const xhr = new XMLHttpRequest()
      //     xhr.open('get', url)
      //     xhr.send(null)

      //     // 等ajax请求结束 异步
      //     xhr.onload = function () {
      //       resolve(JSON.parse(xhr.responseText))
      //     }
      //     xhr.onerror = function () {
      //       reject(JSON.parse(xhr.responseText))
      //     }
      //   })
      // }
      // ajax('xxxx')
      setTimeout(() => {
        console.log(7)
      })
      const p = new Promise((resolve, reject) => {
        console.log(1)
        // 仅仅是把promise的状态标记为 fulfilled
        setTimeout(() => {
          resolve()
        })
        console.log(2)
      })

      // .then(回调函数)  这个回调函数会在promise的状态变成fulfilled的时候，放进异步队列
      p.then(() => {
        console.log(3)
      }).catch(() => {
        console.log(4)
      })
      console.log(5)
      setTimeout(() => {
        console.log(6)
      })
    </script>
  </body>
</html>
